<template>
  <div class="draggBox">
    <el-card class="cardBox">
      <div slot="header">A组（只能往B组拖入）</div>
      <draggable v-model="draggArrLeft" chosenClass="chosen" forceFallback="true" group="people" animation="100" dragClass="dragClass">
        <transition-group>
          <div class="item" v-for="ele in draggArrLeft" :key="ele.id" :style="{ background: ele.color }">{{ele.name}}</div>
        </transition-group>
      </draggable>
    </el-card>

    <el-card class="cardBox">
      <div slot="header">B组（本组不能拖入A组）</div>
      <draggable v-model="draggArrRight" chosenClass="chosen" forceFallback="true" group="people" animation="100" dragClass="dragClass">
        <transition-group>
          <div class="item" v-for="ele in draggArrRight" :key="ele.id" :style="{ background: ele.color }">{{ele.name}}</div>
        </transition-group>
      </draggable>
    </el-card>

  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { randColor } from '@/utils/index'

export default {
  components: { draggable },
  data() {
    return {
      draggArrLeft: [
        { people: 'A01', id: 11, name: 'A -- 第一名', color: randColor() },
        { people: 'A02', id: 12, name: 'A -- 第二名', color: randColor() }
      ],
      draggArrRight: [
        { people: 'B01', id: 21, name: 'B -- 第一名', color: randColor() },
        { people: 'B02', id: 22, name: 'B -- 第二名', color: randColor() }
      ]
    }
  },
  created() { },
  mounted() { },
  beforeDestroy() { },
  methods: {
    //开始拖拽事件
    onStart() { },
    //拖拽结束事件
    onEnd() { },
  }

}

</script>

<style scoped>
.draggBox {
  height: 90%;
  padding: 10px;
  display: flex;
  border: 1px solid green;
}
.cardBox {
  width: 20%;
  height: 100%;
  border: 1px solid red;
  margin-right: 20px;
}
/*被拖拽对象的样式*/
.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 8px;
  cursor: move;
  user-select: none;
}
/*选中样式*/
.chosen {
  border: solid 2px #161616 !important;
}
.dragClass {
  background-color: #aaa !important;
  opacity: 0.5 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
.ghostClass {
  background-color: blue !important;
}
</style>